<style lang="less" scoped>
@import "../assets/css/common.less";
.header {
  height: 50px;
  font-size: 0;
  overflow: hidden;
  background: @cf8;
  .home {
    background: @ch;
    color: @cf;
    font-size: 16px;
    line-height: 50px;
    display: inline-block;
    padding: 0 30px;
    position: absolute;
    &:hover {
      color: @c1;
    }
  }
  ul {
    text-align: right;
    li {
      display: inline-block;
      margin-left: 50px;
      a {
        display: inline-block;
        font-size: 12px;
        color: #000;
        line-height: 1.5;
        padding: 5px 15px 7px;
        border-radius: 4px;
        margin-top: 10px;
        &:hover {
          color: @ch;
        }
        &.editor {
          background: @ch;
          color: @cf;
          &:hover {
            color: @c1;
          }
        }
      }
    }
  }
}
</style>
<template>
  <div class="header">
    <div class="cistern">
      <a class="home" href="/">首页</a>
      <ul>
        <li>
          <a href="/we">我们在一起</a>
        </li>
        <li>
          <a href="/personal-center/login">登录 / 注册</a>
        </li>
        <li>
          <a class="editor" href="/editor/wangeditor">编辑</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "topHeader"
};
</script>
